<template>
  <div id='store_tag'>
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item">
            <span class="search-label">名称:</span>
            <Input v-model="shopNameLike" placeholder="请输入"></Input>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" type="primary" @click="doSearch">查询</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" @click="doReset">重置</Button>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="search-item-right">
          <Col class="search-item">
            <Button class="search-btn" @click='exportData' :disabled='tableData.length>0 ? false: true' v-if="hasPermission('moms:shop:shoplabelexport')">导出</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" @click='skipAdd' v-if="hasPermission('moms:shop:shoplabelcreate')">新建标签</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Modal title="确认提示" width='400' v-model="delShow">
      <Row type='flex' justify="space-between" align='middle'>
        <Col style="padding-left:10px;">
          <Icon type="ios-alert" size="30" color="#ffbf00" />
          <span style="margin-left:10px;font-weight:bold;color:#666666;">带有此业务的门店将不再显示该标签，确认删除？</span>
        </Col>
      </Row>
      <div slot="footer" class="foot">
        <Button class="btn" @click='cancelDel'>取消</Button>
        <Button type="primary" class="btn" style="margin-left:16px;" @click="delSure">确认</Button>
      </div>
    </Modal>
    <Table stripe class="table-list" :loading="loading" :height="tableHeight" :columns="columns" :data="tableData">
      <template slot-scope="{ row }" slot="tagStatus">
        <i-switch v-model='row.tagStatus' @on-change='onChange(row)'>
          <span slot="open" >开</span>
          <span slot="close">关</span>
        </i-switch>
      </template>
      <template slot-scope="{ row }" slot="action">
        <i class="iconsys iconedit" title="编辑" @click='skipEdit(row)' v-if="hasPermission('moms:shop:shoplabelupdate')"></i>
        <i class="iconsys icondel" title="删除" @click='delGroup(row)' v-if="hasPermission('moms:shop:shoplabeldelete')"></i>
      </template>
    </Table>
    <div class="page-box" style="margin-top: 20px">
      <Page :total="searchObj.total"
            :current="searchObj.pageIndex"
            :page-size="searchObj.pageSize"
            @on-change="changePageIndex"
            @on-page-size-change="changePageSize"
            show-sizer
            show-total />
    </div>
  </div>
</template>

<script>
import { groupList, delTag, exportTag, editTag } from '@/api/system/tag'
import { blobToXls } from '@/libs/blobToXls'
export default {
  name: 'store_tag',
  computed: {
    tableHeight () {
      return this.tableData.length > 10 ? 520 : 0
    }
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'store_tag') {
        this.getData()
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.parentId !== to.query.id) {
        vm.parentId = to.query.id
        vm.getData()
      }
    })
  },
  data () {
    return {
      shopTagId: '',
      parentId: '',
      delShow: false,
      loading: false,
      shopNameLike: '',
      searchObj: {
        shopNameLike: '',
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 80
        },
        {
          title: '业务标签分组',
          key: 'parentName'
        },
        {
          title: '业务标签名称',
          key: 'shopTagName'
        },
        {
          title: '使用门店数量',
          key: 'shopCount'
        },
        {
          title: '业务标签状态',
          slot: 'tagStatus'
        },
        {
          title: '操作人',
          key: 'modifier'
        },
        {
          title: '最近操作时间',
          key: 'modifyAt'
        }
        // {
        //   title: '操作',
        //   slot: 'action'
        // }
      ]
    }
  },
  mounted () {
    this.parentId = this.$route.query.id
    this.getData()
    if (this.hasPermission(['moms:shop:shoplabelupdate', 'moms:shop:shoplabeldelete'])) {
      this.columns.push({
        title: '操作',
        slot: 'action'
      })
    }
  },
  methods: {
    exportData () {
      exportTag({
        merchantId: this.$store.state.user.merchantId,
        fileName: 'shopTag.xls',
        type: 'EXCEL'
      }).then(res => {
        if (res.status === 200) {
          blobToXls(res.data, '导出标签列表')
        } else {
          this.$Message.error(res.message || res.error || res.err)
        }
      })
    },
    onChange (row) {
      editTag({
        shopTagId: row.shopTagId,
        shopTagName: row.shopTagName,
        parentId: row.parentId,
        level: 2,
        tagStatus: row.tagStatus ? 1 : 0,
        modifier: this.$store.state.user.userName
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('更新成功！')
          // this.getData()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    doSearch () {
      this.searchObj.shopNameLike = this.shopNameLike
      this.searchObj.pageIndex = 1
      this.getData()
    },
    doReset () {
      this.shopNameLike = ''
      this.searchObj = {
        shopNameLike: '',
        total: 0,
        pageIndex: 1,
        pageSize: 10
      }
      this.getData()
    },
    skipAdd () {
      if (this.parentId) {
        this.$router.push({ name: 'create_tag', query: { id: this.parentId } })
      } else {
        this.$router.push({ name: 'create_tag' })
      }
    },
    skipEdit (row) {
      if (this.parentId) {
        this.$router.push({ name: 'edit_tag', params: { id: row.shopTagId }, query: { id: this.parentId, name: row.shopTagName } })
      } else {
        this.$router.push({ name: 'edit_tag', params: { id: row.shopTagId }, query: { ownId: row.parentId, name: row.shopTagName } })
      }
    },
    cancelDel () {
      this.delShow = false
    },
    delSure () {
      delTag({ shopTagId: this.shopTagId }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('删除成功!')
          this.delShow = false
          this.getData()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    delGroup (row) {
      this.shopTagId = row.shopTagId
      this.delShow = true
    },
    changePageIndex (index) {
      this.searchObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.searchObj.pageSize = size
      this.searchObj.pageIndex = 1
      this.getData()
    },
    getData () {
      groupList({
        merchantId: this.$store.state.user.merchantId,
        parentId: this.parentId,
        shopTagName: this.searchObj.shopNameLike,
        level: 2,
        offset: this.searchObj.pageSize * (this.searchObj.pageIndex - 1),
        limit: this.searchObj.pageSize
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data || []
          this.searchObj.total = result.totalCount
          if (this.tableData.length > 0) {
            this.tableData.forEach(item => {
              if (item.tagStatus === 1) {
                item.tagStatus = true
              } else {
                item.tagStatus = false
              }
            })
          }
          if (result.data.length / this.searchObj.pageSize === 0) {
            if (this.searchObj.pageIndex > 1) {
              this.searchObj.pageIndex--
              this.getData()
            }
          }
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  }
}
</script>

<style lang='less'>
#store_tag{
  .search-box {
    .search-item-left {
      width: 80%;
    }
    .search-item-right {
      width: 20%;
    }
  }
}
</style>
